﻿@model myFinance.Models.Pessoa
@{
	ViewBag.Title = "Perfil";
}
<!DOCTYPE html>
<html>
<head>
	<title>Cadastro</title>
	@if (false)
    {
		<script type="text/javascript" src="../../Scripts/jquery-1.6.4-vsdoc.js"></script>
		<script type="text/javascript" src="../../Scripts/jquery.validate-vsdoc.js"></script>
		<script type="text/javascript" src="../../Scripts/jquery.validate.js"></script>
		<script src="../../Scripts/script.js" type="text/javascript"></script>
    }
	<style type="text/css">
        input[type="text"], input[type="password"], input[type="text"].datepicker, input[type="text"].datepicker-readonly
        {
            font-size: 0.9em;
            line-height: 16px;
            height: 16px;
        }
        .editor-label
        {
            margin: 0.5em 0.5em 0 0;
            line-height: 16px;
            height: 16px;
            width: 150px;
            font-size: 13px;
            padding-top: 4px;
            padding-bottom: 0;
        }
        .editor-field
        {
            margin: 0.5em 0 2px 0;
            line-height: 16px;
            height: 16px;
        }
        #corpo
        {
            height: 500px;
            margin: auto;
            width: 900px;
            padding: 0;
        }
        #avatar
        {
            float: right;
            width: 250px;
            height: 410px;
        }
        #cad
        {
            float: left;
            height: 410px;
            width: 650px;
            margin-bottom: 15px;
        }
        #Nome, #Email
        {
            width: 348px;
        }
        #Bairro, #Complemento, #Twitter, #Msn, #Blog, #Site
        {
            width: 350px;
        }
        #DataNascimento, #CEP
        {
            width: 148px;
        }
        #CPF
        {
            width: 148px;
            margin-left: 35px;
        }
        #DataCadastro, #Usuario, #FoneResidencial, #FoneComercial, #FoneCelular, #RG
        {
            width: 150px;
        }
        #DataCadastro
        {
            margin-left: 36px;
        }
        #Endereco, #Cidade
        {
            width: 286px;
        }
        #Numero
        {
            width: 48px;
            font-size: 0.9em;
        }
        #UF
        {
            width: 46px;
        }
    </style>
</head>
<body>
	<div id="corpo">
		<div id="cad">
			@using (Html.BeginForm())
            {
				@Html.ValidationSummary(true)
                
				@Html.HiddenFor(model => model.Id)
				@Html.HiddenFor(model => model.Avatar)
				<div class="editor-label">
					@Html.LabelFor(model => model.Usuario, Model.Id > 0 ? "Usuário / Data Cad.: " : "Usuário: ")
				</div>
				<div class="editor-field">
					@Html.TextBoxFor(model => model.Usuario, new { @class = "readonly", @readonly = "readonly", tabindex = "-1" })
					@Html.ValidationMessageFor(model => model.Usuario)
					@if (@Model.Id > 0)
                    {                
						@Html.TextBox("DataCadastro", Model.DataCadastro.ToShortDateString(), new { maxlength = 10, @class = "datepicker-readonly", @readonly = "readonly", tabindex = "-1" })
						@Html.ValidationMessageFor(model => model.DataCadastro)                
                    }
                    else
                    {
						@Html.HiddenFor(model => model.DataCadastro)
                    }
				</div>
				<div class="editor-label">
					@Html.LabelFor(model => model.Nome, "Nome: ")
				</div>
				<div class="editor-field">
					@Html.TextBoxFor(model => model.Nome, new { maxlength = 150, @class = "obrigatorio" })
					@Html.ValidationMessageFor(model => model.Nome)
				</div>
				<div class="editor-label">
					@Html.LabelFor(model => model.DataNascimento, "Data de Nascimento: ")
				</div>
				<div class="editor-field">
					@Html.TextBoxFor(model => model.DataNascimento, new { maxlength = 10, @class = "obrigatorio datepicker" })
					@Html.ValidationMessageFor(model => model.DataNascimento)
					@Html.RadioButtonFor(model => model.Sexo, false, new { id = "masculino", style = "margin-left: 35px;" })
					<label for="masculino">
						<img src="@Url.Content("~/Content/imagens/male.png")" alt="Masculino" />
					</label>
					@Html.RadioButtonFor(model => model.Sexo, true, new { id = "feminino" })
					<label for="feminino">
						<img src="@Url.Content("~/Content/imagens/female.png")" alt="Feminino" /></label>
				</div>
				<div class="editor-label">
					@Html.LabelFor(model => model.RG, "RG / CPF: ")
				</div>
				<div class="editor-field">
					@Html.TextBoxFor(model => model.RG, new { maxlength = 30 })
					@Html.ValidationMessageFor(model => model.RG)
					@Html.TextBoxFor(model => model.CPF, new { maxlength = 30 })
					@Html.ValidationMessageFor(model => model.CPF)
				</div>
				<div class="editor-label">
					<label for="CEP">
						CEP (<a href="http://www.correios.com.br" target="_blank" tabindex="-1">Não sabe o CEP?</a>):
					</label>
				</div>
				<div class="editor-field" style="width: 300px">
					@Html.TextBoxFor(model => model.CEP, new { maxlength = 9 })
					<input type="button" id="pesquisacep" value="" class="botao-pesquisar" />
					@Html.ValidationMessageFor(model => model.CEP)
				</div>
				<div class="editor-label">
					@Html.LabelFor(model => model.Endereco, "Endereço: ")
				</div>
				<div class="editor-field">
					@Html.TextBoxFor(model => model.Endereco, new { maxlength = 150 })
					@Html.TextBoxFor(model => model.Numero, new { maxlength = 6, @class = "integer" })
					@Html.ValidationMessageFor(model => model.Endereco)
				</div>
				<div class="editor-label">
					@Html.LabelFor(model => model.Cidade, "Cidade/UF: ")
				</div>
				<div class="editor-field">
					@Html.TextBoxFor(model => model.Cidade, new { maxlength = 150 })
					@Html.TextBoxFor(model => model.UF, new { maxlength = 2 })
					@Html.ValidationMessageFor(model => model.UF)
				</div>
				<div class="editor-label">
					@Html.LabelFor(model => model.Bairro, "Bairro: ")
				</div>
				<div class="editor-field">
					@Html.TextBoxFor(model => model.Bairro, new { maxlength = 100 })
					@Html.ValidationMessageFor(model => model.Bairro)
				</div>
				<div class="editor-label">
					@Html.LabelFor(model => model.Complemento, "Complemento: ")
				</div>
				<div class="editor-field">
					@Html.TextBoxFor(model => model.Complemento, new { maxlength = 100 })
					@Html.ValidationMessageFor(model => model.Complemento)
				</div>
				<div class="editor-label">
					@Html.LabelFor(model => model.FoneResidencial, "Fones Resid / Com:")
				</div>
				<div class="editor-field">
					<div style="width: 180px; float: left">
						@Html.TextBoxFor(model => model.FoneResidencial, new { maxlength = 14, @class = "fone" })
						@Html.ValidationMessageFor(model => model.FoneResidencial)
					</div>
					<div style="margin-left: 20px; float: left">
						@Html.TextBoxFor(model => model.FoneComercial, new { maxlength = 14, @class = "fone" })
						@Html.ValidationMessageFor(model => model.FoneComercial)
					</div>
				</div>
				<div class="editor-label">
					@Html.LabelFor(model => model.FoneCelular, "Fone Celular:")
				</div>
				<div class="editor-field">
					@Html.TextBoxFor(model => model.FoneCelular, new { maxlength = 14, @class = "fone" })
					@Html.ValidationMessageFor(model => model.FoneCelular)
				</div>
				<div class="editor-label">
					@Html.LabelFor(model => model.Email, "E-mail: ")
				</div>
				<div class="editor-field">
					@Html.TextBoxFor(model => model.Email, new { maxlength = 100, @class = "obrigatorio" })
					@Html.ValidationMessageFor(model => model.Email)
				</div>
				<div class="editor-label">
					@Html.LabelFor(model => model.Twitter, "Twitter (@): ")
				</div>
				<div class="editor-field">
					@Html.TextBoxFor(model => model.Twitter, new { maxlength = 30 })
					@Html.ValidationMessageFor(model => model.Twitter)
				</div>
				<div class="editor-label">
					@Html.LabelFor(model => model.Msn, "MSN: ")
				</div>
				<div class="editor-field">
					@Html.TextBoxFor(model => model.Msn, new { maxlength = 100 })
					@Html.ValidationMessageFor(model => model.Msn)
				</div>
				<div class="editor-label">
					@Html.LabelFor(model => model.Site, "Site / Blog: ")
				</div>
				<div class="editor-field">
					@Html.TextBoxFor(model => model.Site, new { maxlength = 100 })
					@Html.ValidationMessageFor(model => model.Site)
				</div>
				<div class="editor-label">
					&nbsp;
				</div>
				<div class="editor-field" style="float: right; padding-right: 130px; margin-top: 15px;">
					<input type="submit" value="Gravar" />
					<input type="button" value="Cancelar" id="cancelar" />
				</div>
            }
		</div>
		<div id="avatar">
			<iframe src="@Url.Action("IncluirAvatar", "Perfil")" width="250" height="410" seamless></iframe>
		</div>
		<a href="#" id="winAvatar" style="display: none;"></a>
	</div>
	<script type="text/javascript">
		var cepAntigo = "";
		var incluirAvatar = false;
		$(function () {
			$('#CEP').mask('99999-999');
			$('#CPF').mask('999.999.999-99');
			$('#Numero').rules('remove')
			$('.fone').mask('(99) 9999-9999');
			$('.datepicker').mask('99/99/9999');
			if ('@Model.Id' == 0) {
				$('#DataNascimento').val('');
			} else {
				cepAntigo = '@Model.CEP';
			}
			$('#pesquisacep').click(function () {
				var cep = $('#CEP').val();
				if (cep == '') {
					$('#CEP').valid();
				} else {
					if (!cep == "") {
						$('#Endereco').addClass('loading').val('');
						$('#Bairro').addClass('loading').val('');
						$('#Cidade').addClass('loading').val('');
						$('#UF').addClass('loading').val('');
						$.getScript("http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep=" + cep, function () {
							if (resultadoCEP["resultado"] > 0) {
								$('#Endereco').removeClass('loading').val(unescape(resultadoCEP["tipo_logradouro"]) + " " + unescape(resultadoCEP["logradouro"]));
								$('#Bairro').removeClass('loading').val(unescape(resultadoCEP["bairro"]));
								$('#Cidade').removeClass('loading').val(unescape(resultadoCEP["cidade"]));
								$('#UF').removeClass('loading').val(unescape(resultadoCEP["uf"]));
								cepAntigo = cep;
								if ($('#Endereco').val() == '') {
									$('#Endereco').focus();
								} else {
									$('#Numero').focus();
								}
							} else {
								alert("Endereço não encontrado.");
								$('#Endereco').removeClass('loading').val('');
								$('#Bairro').removeClass('loading').val('');
								$('#Cidade').removeClass('loading').val('');
								$('#UF').removeClass('loading').val('');
								$('#CEP').val('').focus();
								cepAntigo = "";
							}
						});
					} else {
						$('#Endereco').removeClass('loading').val('');
						$('#Bairro').removeClass('loading').val('');
						$('#Cidade').removeClass('loading').val('');
						$('#UF').removeClass('loading').val('');
						cepAntigo = "";
					}
				}
			});
			loadPage();
			hideLoading();
			$('#Nome').focus();
		});		
		function redirect() {
			window.location.href = '@Url.Action("Index", "Home")';
		}
		$('#cancelar').click(function () {
			showLoading();
			redirect();
		});
		$("#winAvatar").fancybox({
			'autoScale': true,
			'autoDimensions': false,
			'width': 770,
			'height': 600,
			'transitionIn': 'fade',
			'transitionOut': 'fade',
			'showCloseButton': true,
			'hideOnOverlayClick': false,
			'hideOnContentClick': false,
			'content': '@Url.Action("EditarAvatar", "Perfil")',
			'type': 'inline',
			'onClosed': function () {
				var iframe = window.frames;
				iframe[0].$('#Incluir').val('não');
				if (incluirAvatar) {
					iframe[0].document.location.href = '@Url.Action("IncluirAvatar", "Perfil")';
				}
			}
		});
	</script>
</body>
</html>
